<template>
  <div class="dashboard-container">
    <el-row :gutter="10">
      <el-col :span="2">
        <el-button @click="add" type="primary" icon="el-icon-circle-plus"
          >添加套餐</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :data="List"
      style="width: 100%"
      max-height="550"
      class="table"
      stripe>
      <el-table-column prop="name" label="套餐名称" align="center" />
      <el-table-column prop="remark" label="套餐描述" align="center" />
      <!-- <el-table-column label="套餐权限" align="center" >
        <template slot-scope="scope">
          <span>
            {{ scope.row.permIds  }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column prop="creator" label="创建人" align="center" />
      <el-table-column
        prop="createTime"
        label="创建日期"
        align="center"
        width="100px"
      />
      <el-table-column prop="updater" label="更新人" align="center" />
      <el-table-column
        prop="updateTime"
        label="更新日期"
        align="center"
        width="100px"
      />
      <el-table-column prop="updateTime" label="套餐价格" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.price }} 元</span>/<span>{{
            scope.row.timenum
          }}</span
          ><span>{{ scope.row.timeunit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.status | statusClassFormat">
            {{ scope.row.status == 0 ? "已启用" : "已停用" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" align="center">
        <template slot-scope="scope">
          <a
            @click.prevent="toggleStatus(scope.row.id)"
            :class="scope.row.status == 0 ? 'red' : 'blue'"
          >
            {{ scope.row.status == 0 ? "禁用" : "启用" }}
          </a>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <a @click.prevent="edit(scope.row)"> 编辑 </a> | 
          <a @click.prevent="drop(scope.row.id)"> 删除 </a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增套餐"
      :visible.sync="dialogFormVisible1"
      @closed="clearData"
    >
      <el-form >
        <el-form-item label="套餐名称" >
          <el-input v-model="pck.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐描述" >
          <el-input
            type="textarea"
            v-model="pck.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-row :gutter="10">
          <el-form-item label="套餐价格：" >
            <el-col :span="3">
              <el-input v-model="pck.price" autocomplete="off" />
            </el-col>
            <el-col :span="2">
              <span> 元 每</span>
            </el-col>
            <el-col :span="2">
              <el-input v-model="pck.timenum" autocomplete="off" />
            </el-col>
            <el-col :span="3">
              <el-select v-model="pck.timeunit">
                <el-option value="日" label="日" />
                <el-option value="月" label="月" />
                <el-option value="季度" label="季度" />
                <el-option value="年" label="年" />
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-form-item label="套餐权限">
          <el-select
            v-model="selectedPermits"
            multiple
            placeholder="请选择套餐权限" >
            <el-option
              v-for="item in permits"
              :key="item.id"
              :label="item.permName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐状态" >
          <el-radio-group v-model="pck.status">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible1 = false;doAdd();">添 加</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑套餐"
      :visible.sync="dialogFormVisible2"
      @closed="clearData"
    >
      <el-form >
        <el-form-item label="套餐名称" >
          <el-input v-model="pck.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐描述" >
          <el-input
            type="textarea"
            v-model="pck.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-row :gutter="10">
          <el-form-item label="套餐价格：" >
            <el-col :span="3">
              <el-input v-model="pck.price" autocomplete="off" />
            </el-col>
            <el-col :span="2">
              <span> 元 每</span>
            </el-col>
            <el-col :span="2">
              <el-input  v-model="pck.timenum" autocomplete="off" />
            </el-col>
            <el-col :span="3">
              <el-select v-model="pck.timeunit">
                <el-option value="日" label="日" />
                <el-option value="月" label="月" />
                <el-option value="季度" label="季度" />
                <el-option value="年" label="年" />
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-form-item label="套餐权限">
          <el-select
            v-model="selectedPermits"
            multiple
            placeholder="请选择套餐权限" >
            <el-option
              v-for="item in permits"
              :key="item.id"
              :label="item.permName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐状态" >
          <el-radio-group v-model="pck.status">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible2 = false;doEdit();">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  all,
  toggelStatus,
  cascade,
  saveAdd,
  saveEdit,
  del
} from "@/api/pck";
import {  allPermit} from "@/api/pckPerm"
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      List: [],
      permits: [],
      selectedPermits: [],
      pck: {
        name: "",
        status: 1,
        remark: "",
        permIds: "",
        price: "",
        timeunit: "",
        timenum: "",
      },
      dialogFormVisible1: false,
      dialogFormVisible2: false,
    };
  },
  methods: {
    search() {
      allPermit().then((res) => {
        this.permits = res.data;
      });
      all().then((res) => {
        this.List = res.data;
      });
    },
    add() {
      this.dialogFormVisible1 = true;
    },
    doAdd() {
      this.pck.permIds = JSON.stringify(this.selectedPermits) 
      saveAdd(this.pck).then((res) => {
        if (res.ok) {
          this.$message.success(res.message);
        } else this.$message.error(res.message);
      });
    },
    edit(pck) {
      this.selectedPermits = JSON.parse(pck.permIds)
      this.pck = pck;
      this.dialogFormVisible2 = true;
    },
    doEdit() {
      this.pck.permIds = JSON.stringify(this.selectedPermits)
      saveEdit(this.pck).then((res) => {
        if (res.ok) {
          this.$message.success(res.message);
        } else this.$message.error(res.message);
      });
    },
    drop(pckId){
      del(pckId).then(res=>{
        if(res.ok){
          this.$message.success(res.message)
          this.search()
        }else
        this.$message.error("删除失败")
      })
    },
    toggleStatus(pckId) {
      toggelStatus(pckId).then((res) => {
        this.search();
      });
    },
    clearData() {
      this.pck.name = ""
      this.pck.status = 1
      this.pck.remark = ""
      this.pck.permIds = ""
      this.pck.price = ""
      this.pck.timeunit = ""
      this.pck.timenum = ""
      this.selectedPermits = []
      this.search()
    },
  },
  created() {
    this.search();
  },
  filters: {
    statusClassFormat(source) {
      return source == 1 ? "disableStatus3 ant-tag3" : "enableStatus3 ant-tag3";
    },
  },
};
</script>

<style lang="scss" scoped>
a {
  color: blue;
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.enableStatus3 {
  background-color: rgb(135, 208, 104);
  color: #fff;
}
.disableStatus3 {
  background-color: rgb(255, 85, 0);
  color: #fff;
}
.ant-tag3 {
  box-sizing: border-box;
  margin: 0 8px 0 0;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  display: inline-block;
  height: auto;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  opacity: 1;
  transition: all 0.3s;
}
.red {
  color: red;
}
.green {
  color: green;
}
</style>
